<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9.26作业</title>
    <link rel="stylesheet" href="./css/作业.css">
</head>
<body>
    <header>
        <div>
            <h1>Simple Magazine <span class="h">/ News</span></h1>
        </div>
    </header>
    <nav>
        <ul>
            <li>News</li>
            <li>Politics</li>
            <li>Culture</li>
            <li>Sport</li>
            <li>Debate</li>
            <li>Entertainment</li>
            <div class="xlk">
                <span>Frontpage</span>
                <span>Style</span>
                <span>Two Colwms</span>
                <span>Single Column</span>
                <span>Archives</span>
                <span>Empty Page</span>
            </div>
        </ul>
    </nav>
    <section>
        <aside>
            <!-- 中间左边盒子 -->
            <div class="zuo">
                <h1 class="l">Template Information</h1>
                <span>18:11， Sunday,August 2, 2009 by Viktor Persson</span>
                        <!-- 女人玩电脑 -->
                        <div class="tp">
                            
                            <img src="./img/news-image-big.jpg" alt="">
                        </div>
                        <!-- 图片下文字 -->
                        <div class="tpxwz">
                            <p>This is a free website template by Arcsin,built using tableless XHTML andcss.</p>
                            <p>This t emplate is distributed under a Creative Commons Attribution 2.5License, which allows you to use and modify it for any purpose (personaland commerciall， under the condition that you keep the provided ereditlinks in the footer.</p>
                            <p>The latest template wersion and CMS conversions for platforms such asWordPress and Blogger can be found at the official pag e.</p>
                            <p>For more templates,questions and comments please visit Arcsin WebTemplates.</p>
                            <p>Have fun!</p>
                            <p><a href="">Read more 》</a></p>
                        </div>
                        <!-- 内马尔 面 车 -->
                        <div class="szt">
                            <img src="./img/news-image-med-1.jpg" alt="">
                            <img src="./img/news-image-med-2.jpg" alt="">
                            <img src="./img/news-image-med-3.jpg" alt="">
                        </div>
                        <!-- 三张图下面的文字 -->
                        <div class="sztxwz1">
                            <h1>curabitur justo</h1>
                            <h1>arcu</h1>
                            <p>Bibendum at bi bendum in,</p>
                            <p>SemPer nec ibh.</p>
                        </div>
                        <!-- 第二章图下文字 -->
                        <div class="sztxwz2">
                            <h1>Donec sodales</h1>
                            <p>Duis risus lectus,gr amvi</p>
                            <p>daeuScel er i5q1u1e-</p>
                        </div>
                        <!-- 第三张图下文字 -->
                        <div class="sztxwz3">
                            <h1>Donec rhoncus</h1>
                            <p>Donec eget congue libero.</p>
                        </div>
            </div>
            <!-- 中间右边盒子 -->
            <div class="zhong">
                <div class="zhong1">
                    <img src="./img/news-image-small-1.jpg" alt="">
                    <h1>Article title</h1>
                    <p class="p2">Integer dian elit, condimentanacsenper at,  justo atconmodo. Aenean eui snod</p>
                    <p class="p1">tinci dunt loren scelerisqueeai smod.</p>
                    <a href="">Read moreo》</a>
                </div>
                <div class="zhong2">
                    <img src="./img/news-image-small-2.jpg" alt="">
                    <h1>Second Article Title</h1>
                    <p>Sed congue lacini a leo,seddi gnissim odio pharetra vel.Fasce a di gnissim dai. FusceSemper porttit or:enim dapi buasvenenati s.</p>
                    <a href="">Read moreo》</a>
                </div>
                <div class="zhong3">
                    <h1>Article title</h1>
                    <p class="p2">Integer dian elit, condimentanacsenper at,  justo atconmodo. Aenean eui snod</p>
                    <a href="">Read moreo》</a>
                </div>
                <div class="zhong4">
                    <!-- 右上盒子 -->
                    <div class="ys">
                        <img src="./img/icon-time.gif" alt="">
                        <p>Latest News </p>
                        <p class="p3">Aene an tempor arcu..<span>20.49</span></p>
                        <p class="p4">Justo interdum rutrum<span>20.49</span></p>
                        <p class="p5">In nec justo in urna<span>20.49</span></p>
                        <p class="p6">Accum san condimentum<span>20.49</span></p>
                        <p class="p7">Etiam commodo bibendum<span>20.49</span></p>
                        <p class="p8">Mauris euismod justo<span>20.49</span></p>
                        
                        <a href="">Browse all》</a>
                    </div>
                    <!-- 右中盒子 -->
                    <div class="yz">
                        <p>Latest News </p>
                        <p >Aene an tempor arcu..</p>
                        <p >Justo interdum rutrum</p>
                        <p >In nec justo in urna</p>
                        <p >Accum san condimentum</p>
                        <p >Etiam commodo bibendum</p>
                        <p >Mauris euismod justo</p>
                        
                        <a href="">Browse all》</a>
                    </div>
                    <!-- 右下盒子 -->
                    <div class="yx">
                        <p>Latest News </p>
                        <p >Aene an tempor arcu..</p>
                        <p >Justo interdum rutrum</p>
                        <p >In nec justo in urna</p>
                        <p >Accum san condimentum</p>
                        <p >Etiam commodo bibendum</p>
                        <p >Mauris euismod justo</p>
                        
                        <a href="">Browse all》</a>
                    </div>
                </div>
            </div>
        </aside>
    </section>
    <footer>
        <div>
            <p class="h">About Simple Magazine</p>
            <p>Lorem ipsn dolor sit amet,</p>
            <p>cOnsectetur adipi scing elit.</p>
            <p><a href="">Learn more》</a></p>
        </div>
        <!-- 第二个盒子 -->
        <div class="deg">
             <p class="h">About Simple Magazine</p>
            <p>Lorem ipsn dolor sit amet,</p>
            <p>cOnsectetur adipi scing elit.</p>
            <p><a href="">Learn more》</a></p>
        </div>
        <!-- 第三盒子 -->
        <div class="dsg">
            <p class="h">About Simple Magazine</p>
            <p>Lorem ipsn dolor sit amet,</p>
            <p>cOnsectetur adipi scing elit.</p>
            <p><a href="">Learn more》</a></p>
        </div>
        <!-- 第四盒子 -->
        <div class="dsig">
            <p class="h">About Simple Magazine</p>
            <p>Lorem ipsn dolor sit amet,</p>
            <p>cOnsectetur adipi scing elit.</p>
            <p><a href="">Learn more》</a></p>
        </div>
    </footer>
</body>
</html>